<template>
  <el-row class="mx__20 px-20 bg-white" style="min-width: 1200px">
    <el-col class="current-content-style" style="min-width: 1200px">
      <el-row style="min-width: 1200px">
        <el-col :span="12">
          <div id="sichuan" v-if="pyName === 'sichuan'"></div>
        </el-col>
        <el-col :span="12" class="flex-box">
          <div id="line"></div>
          <div id="pie"></div>
          <div id="shadow"></div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
// 统计分析
import * as echarts from 'echarts'
import {
  censusColumnarEcharts,
  censusMapEcharts,
  censusTypeColumnarEcharts,
  censusYearSectorEcharts
} from '@/config/api'
export default {
  data() {
    return {
      pyName: 'sichuan',
      year: '',
      month: '',
      // 波浪图的颜色
      color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00', 'rgb(135, 0, 157)'],
      option1: {
        title: {
          text: '当月按用水类型统计',
          subtext: '单位：吨'
        },
        tooltip: {},
        xAxis: {
          data: ['居民生活用水', '非居民生活用水', '城市绿化', '学校', '行政机关', '消防机关']
        },
        yAxis: {},
        series: [
          {
            name: '用水量',
            type: 'bar',
            data: [5000000, 2000000, 360000, 100000, 100000, 200000]
          }
        ]
      },
      option2: {
        title: {
          text: '当月按客户类型来统计',
          subtext: '单位: 吨'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '15%',
          left: 'center'
        },
        series: [
          {
            name: '按客户类型来统计',
            type: 'pie',
            radius: ['10%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048000, name: '个人' },
              { value: 7350000, name: '企业' },
              { value: 5800000, name: '事业单位' },
              { value: 4840000, name: '政府' },
              { value: 3000000, name: '公共部门' }
            ]
          }
        ]
      },
      option3: {
        title: {
          text: '四川省区域用水统计（2023年1月）',
          subtext: '注：按市级区域统计上月用水量 (单位: 吨)'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c} (吨)'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        visualMap: {
          min: 0,
          max: 100000,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            name: '成都市区市县用水统计',
            type: 'map',
            map: 'sichuan',
            label: {
              show: true
            },
            data: [
              { name: '成都市', value: 0 },
              { name: '自贡市', value: 0 },
              { name: '攀枝花市', value: 0 },
              { name: '泸州市', value: 0 },
              { name: '德阳市', value: 0 },
              { name: '绵阳市', value: 0 },
              { name: '广元市', value: 0 },
              { name: '遂宁市', value: 0 },
              { name: '内江市', value: 0 },
              { name: '乐山市', value: 0 },
              { name: '南充市', value: 0 },
              { name: '眉山市', value: 0 },
              { name: '宜宾市', value: 0 },
              { name: '广安市', value: 0 },
              { name: '达州市', value: 0 },
              { name: '雅安市', value: 0 },
              { name: '巴中市', value: 0 },
              { name: '资阳市', value: 0 },
              { name: '阿坝藏族羌族自治州', value: 0 },
              { name: '甘孜藏族自治州', value: 0 },
              { name: '凉山彝族自治州', value: 0 }
            ]
            // 自定义名称映射
            // nameMap: {
            //   qingyangqu: '青羊区',
            // }
          }
        ]
      },
      option4: {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        title: {
          text: '每月用水对比统计',
          subtext: '注：统计周期为最近5年的数据，单位(百万吨)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          right: '20px',
          // top: '10%',
          data: ['2018', '2019', '2020', '2021', '2022']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '2018',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250, 453, 676, 234, 99, 560]
          },
          {
            name: '2019',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(0, 221, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 282, 111, 234, 220, 340, 310, 141, 164, 900, 340, 250]
          },
          {
            name: '2020',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(55, 162, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(116, 21, 219)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 132, 201, 334, 190, 130, 220, 101, 264, 90, 340, 250]
          },
          {
            name: '2021',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 0, 135)'
                },
                {
                  offset: 1,
                  color: 'rgb(135, 0, 157)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 402, 231, 134, 190, 230, 120, 101, 264, 90, 340, 250]
          },
          {
            name: '2022',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 191, 0)'
                },
                {
                  offset: 1,
                  color: 'rgb(224, 62, 76)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 302, 181, 234, 210, 290, 150, 101, 264, 90, 340, 250]
          }
        ]
      }
    }
  },
  mounted() {
    //按用水类型统计;上月用水量(柱状图);
    this.draw1()
    //按客户类型来统计;上月用水量(饼图);
    this.draw2()
    //按一级城市区域统计上月用水量;上月用水量(地图);
    this.draw3()
    //按年对比统计分析12个月用水量;上月用水量(波浪图);
    this.draw4()
  },
  methods: {
    // 柱状图
    draw1() {
      var myChart = echarts.init(document.getElementById('line'))
      censusTypeColumnarEcharts().then(res => {
        console.log('上月用水量(柱状图)', res)
        if (res.code === 200) {
          let titles = []
          let values = []
          res.data.forEach(el => {
            titles.push(el.name)
            values.push(el.value)
          })
          this.option1.xAxis.data = titles
          this.option1.series[0].data = values
          myChart.setOption(this.option1)
        }
      })
    },
    // 饼图
    draw2() {
      var myChart = echarts.init(document.getElementById('pie'))
      censusColumnarEcharts().then(res => {
        console.log('上月用水量(饼图);', res)
        if (res.code === 200) {
          this.option2.series[0].data = res.data
          myChart.setOption(this.option2)
        }
      })
    },
    // 地图
    draw3() {
      var myChart = echarts.init(document.getElementById('sichuan'))
      myChart.showLoading()
      let scJson = require('@/map/json/sichuan.json')
      myChart.hideLoading()
      echarts.registerMap('sichuan', scJson) // 注册地图，使用四川省的数据
      censusMapEcharts().then(res => {
        console.log('上月用水量(地图):', res)
        if (res.code === 200) {
          let d = new Date()
          this.year = d.getFullYear()
          this.month = d.getMonth() + 1
          let textTitle = `四川省区域用水统计（${this.year}年${this.month}月）`
          this.option3.title.text = textTitle

          let resData = res.data
          let valurArr = []
          resData.forEach(el => {
            valurArr.push(el.value)
            // 循环替代
            this.option3.series[0].data.forEach(item => {
              if (item.name === el.name) {
                item.value = el.value
              }
            })
          })
          // 求最大值，修改地图中城市的颜色
          let obj = this.mapValueMinAndMax(valurArr)
          this.option3.visualMap.max = obj.max

          myChart.setOption(this.option3)
        }
      })
    },
    // 波浪对比图
    draw4() {
      var myChart = echarts.init(document.getElementById('shadow'))
      censusYearSectorEcharts().then(res => {
        console.log('按年对比统计分析12个月用水量;上月用水量(波浪图)', res)
        let yearArr = []
        let seriesArr = []
        res.data.forEach((item, index) => {
          yearArr.push(item.name)
          let seriesObj = {
            name: item.name,
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: this.color[index]
                },
                {
                  offset: 1,
                  color: this.color[index + 1]
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          }
          let valueArr = []
          item.value.forEach(el => {
            valueArr.push(el.value)
          })
          seriesObj.data = valueArr
          seriesArr.push(seriesObj)
          this.option4.legend.data = yearArr
          this.option4.series = seriesArr
          myChart.setOption(this.option4)
          window.addEventListener('resize', () => {
            myChart.resize() // 重新渲染图表， 5.0出来的新功能。
          })
        })
      })
    },
    // 地图中，用水最大的值：max,
    mapValueMinAndMax(arr) {
      console.log(arr)
      return { max: arr.length === 0 ? 0 : Math.max(...arr) }
    }
  }
}

// https://datav.aliyun.com/portal/school/atlas/area_selector， 下载地图的数据

// 下载地图数据，或者直接通过axios.get()请求指定的URL。
</script>

<style scoped>
.flex-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
#sichuan {
  width: 90%;
  min-width: 500px;
  height: 700px;
}
#line {
  min-width: 250px;
  width: 50%;
  height: 350px;
}
#pie {
  min-width: 250px;
  width: 50%;
  height: 350px;
}
#shadow {
  width: 100%;
  height: 350px;
}
</style>
